<template>
  <div
    class="content"
    :style="bgImg"
    v-loading="loading"
    element-loading-text="Loading..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.3)"
  >
    <div class="game">
      <div
        class="backBtn listBack hvr-grow"
        v-if="isGame"
        @click="
          back('home');
          click_play();
        "
        @mouseenter="enter_play"
      >
        <img src="@/assets/imgs/game/butoon_back.webp" />
      </div>
      <div
        class="backBtn gameBack hvr-grow"
        v-else
        @click="
          back('game');
          click_play();
        "
        @mouseenter="enter_play"
      >
        <img src="@/assets/imgs/game/butoon_back.webp" />
      </div>
      <div class="gameList" v-if="isGame">
        <div class="games tebGames flex_col">
          <div class="details">
            <!-- 上半部分 -->
            <div class="just_bet">
              <div class="poster">
                <img :src="poster_src" />
              </div>
              <div class="topleft flex_col just_bet">
                <div class="just_bet align_cen" style="height: 3.2813rem">
                  <div class="times flex_col">
                    <p class="gameTitle">{{ game_title[game_key] }}</p>
                    <p class="cumulative">
                      <span class="green">{{ allRecord[game_key] || 0 }}</span>
                      bunnies played
                    </p>
                    <p class="mytimes">
                      I played
                      <span class="green">{{
                        myRanks[game_key].total_play_times || 0
                      }}</span>
                      times, and
                      <span class="green">{{
                        myRanks[game_key].weekly_play_times || 0
                      }}</span>
                      were within this week.
                    </p>
                  </div>
                  <div class="logo">
                    <img src="@/assets/imgs/game/logo_teb_mini.webp" />
                  </div>
                </div>
                <div class="tables flex_col">
                  <div class="tableTitle">Weekly rank</div>
                  <div class="ranking table">
                    <ul class="rankTable">
                      <li
                        v-for="(i, num) in rankLists[game_key].slice(0, 50)"
                        :key="num"
                        class="just_bet"
                      >
                        <div class="num">{{ num + 1 }}</div>
                        <div class="name">
                          <span class="just_bet align_cen flex_rev">
                            {{ i.first_name }}
                            <img
                              src="@/assets/imgs/game/huangguan_1.webp"
                              v-if="num == 0 && i.first_name"
                            />
                            <img
                              src="@/assets/imgs/game/huangguan_2.webp"
                              v-if="num == 1 && i.first_name"
                            />
                            <img
                              src="@/assets/imgs/game/huangguan_3.webp"
                              v-if="num == 2 && i.first_name"
                            />
                          </span>
                        </div>
                        <div class="address">{{ i.wallet_address }}</div>
                        <div class="score">{{ i.score / 100 || "" }}</div>
                      </li>
                    </ul>
                  </div>
                  <div class="Myranking table">
                    <ul class="rankTable">
                      <li class="just_bet">
                        <div class="num">
                          {{ myRanks[game_key].rank }}
                        </div>
                        <div class="name">{{ myInfo.user_name }}</div>
                        <div class="address">
                          {{ myInfo.wallet_address }}
                        </div>
                        <div class="score">
                          {{ myRanks[game_key].best_score || "" }}
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <!-- 下半部分 -->
            <div class="bottom just_bet">
              <div class="time flex_col align_cen">
                <div class="actime flex_col align_cen">
                  <div class="title">Cool down time</div>
                  <div class="date">{{ downTime }}</div>
                </div>
                <div class="version" v-if="!can_play">
                  {{ timeTip[game_key] }}
                </div>
              </div>
              <div class="rule">
                <p v-for="(rule, serial) in gameRule[game_key]" :key="serial">
                  {{ rule }}
                </p>
              </div>
              <div
                class="startBtn"
                @click="
                  start();
                  click_play();
                "
                @mouseenter="enter_play"
              >
                <img src="@/assets/imgs/game/butoon_start2.webp" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <iframe
        ref="gameiframe"
        :src="game_src"
        width="100%"
        height="650px"
        scrolling="auto"
        frameborder="0"
        v-else
      ></iframe
      > 
    </div>
    <div class="overlay" v-show="isReset">
      <div class="info">
        <div class="description">
          <p>{{ carrots[game_key] }}</p>
        </div>
        <div class="btns">
          <div
            class="btn"
            @click="
              click_play();
              reset();
            "
            @mouseenter="enter_play"
          >
            YES
          </div>
          <div
            class="btn"
            @click="
              click_play();
              isReset = false;
            "
            @mouseenter="enter_play"
          >
            CANCEL
          </div>
        </div>
      </div>
    </div>

    <!-- 封禁账号登录 -->
    <ban v-if="isWallet"> </ban>

    <!-- <audio ref="audio_enter">
      <source src="@/assets/sound/enter.wav" />
    </audio>
    <audio ref="audio_click">
      <source src="@/assets/sound/clik.wav" />
    </audio> -->
  </div>
</template>

<script>
import ban from "@/components/ban.vue";
export default {
  name: "",
  components: {
    ban,
  },
  data() {
    return {
      isWallet: false, //是否为封禁账号
      loading: false, //等待
      isGame: true,
      game_keys: ["zombie_bunny", "j_jump", "cyber_wing"], //游戏key
      game_asc: {
        zombie_bunny: true,
        j_jump: false,
        cyber_wing: false,
      }, //游戏排序方式
      game_title: {
        zombie_bunny: "ZOMBIE BUNNY",
        j_jump: "J-JUMP",
        cyber_wing: "CYBER WING",
      }, //游戏名字
      coverImgUrl: {
        zombie_bunny: require(`@/assets/imgs/game/zombie_bunny_bg.jpg`),
        j_jump: require(`@/assets/imgs/game/j_jump_bg.jpg`),
        cyber_wing: require(`@/assets/imgs/game/cyber_wing_bg.png`),
      }, //游戏背景图片
      poster_src: "", //游戏海报地址
      rankLists: {}, //多个排行榜
      myRanks: {}, //我的游戏记录
      allRecord: {}, //整体游戏记录
      myInfo: {
        user_name: "",
        wallet_address: "",
      }, //我的用户名和地址
      can_play: false, //游戏游玩资格
      gameRule: {
        zombie_bunny: [
          "May day! May day! Rosewood calling all soldiers to help! ",
          "  Come defend your home and join the fight to earn precious $CARROT! ",
        ],
        j_jump: [
          "Carrots...the mutant carrots wake up! he is the biggest threat to TEB now!",
          "Don't let him touch you, you'll fall off your land!",
        ],
        cyber_wing: [
          "The evil air force commander has snatched all the $Carrots. We have to take them back.",
          "Everyone! Quickly fly your own aircraft to retrieve the $Carrots that belong to you!",
        ],
      }, //游戏简介
      downTime: "available",
      timeTip: {
        zombie_bunny: "Click GO to consume 5 $CARROTs and again",
        j_jump: "Click GO to consume 8 $CARROTs and again",
        cyber_wing: "Click GO to consume 8 $CARROTs and again",
      },
      saveTime: 0,
      timer: "",
      game_key: this.$route.query.key ?? "zombie_bunny",
      game_src: "", //游戏地址
      isReset: false, //游戏重置弹窗
      carrots: {
        zombie_bunny:
          "Oops! The mutant Bunnies have closed your door. Are you sure you will spend 5 $CARROTs to open it?",
        j_jump:
          "Oops! The mutant Bunnies have closed your door. Are you sure you will spend 8 $CARROTs to open it?",
        cyber_wing:
          "Oops! The mutant Bunnies have closed your door. Are you sure you will spend 8 $CARROTs to open it?",
      }, //重置游戏消耗量
    };
  },
  watch: {},
  computed: {
    bgImg() {
      return {
        backgroundImage: "url(" + this.coverImgUrl[this.game_key] + ")",
      };
    },
  },
  created() {
    //确定为进去正式
    sessionStorage.setItem("Official", 1);

    this.game_keys.forEach((item) => {
      this.rankLists[item] = [{}, {}, {}, {}, {}];
      this.myRanks[item] = {
        best_score: "",
        rank: "",
        total_play_times: 0,
        weekly_play_times: 0,
      };
      this.allRecord[item] = 0;
    });
    this.game_src = `/webGL/${this.game_key}/index.html`;
    this.poster_src = require(`@/assets/imgs/game/${this.game_key}.png`);
  },
  mounted() {
    this.getWallet();
    this.init();
  },
  methods: {
    init() {
      this.getRank();
      this.getMyInfo();
      this.getTotalRecord();
    },
    back(tpye) {
      if (tpye == "home") {
        this.$router.push("/");
      } else {
        this.$amplitude_track("GAME_BACK", { game: this.game_key });
        this.init();
        this.isGame = true;
      }
    },
    // 获取排行榜
    async getRank() {
      this.loading = true;
      await this.$api
        .getRankLists([
          { asc: this.game_asc[this.game_key], game_key: this.game_key },
        ])
        .then((res) => {
          this.loading = false;
          this.rankLists = res.data;
        })
        .catch(() => {
          this.loading = false;
        });

      // 判断是否有数据返回
      this.game_keys.forEach((i) => {
        if (!this.rankLists[i]) {
          this.rankLists[i] = [{}, {}, {}, {}, {}];
        } else {
          Object.keys(this.rankLists).forEach((key) => {
            this.rankLists[key].forEach((item) => {
              if (i == "cyber_wing") {
                item.score = item.score * 100;
              }
              if (item.wallet_address) {
                item.wallet_address = this.hiddeAddress(item.wallet_address);
              }
              // 数据不满5个时。补充空的数据占位
              if (this.rankLists[key].length < 5) {
                for (let i = 0; i < 5; i++) {
                  if (!this.rankLists[key][i]) {
                    this.rankLists[key].push("{}");
                  }
                }
              }
            });
          });
        }
      });
    },
    // 获取整体游戏记录
    async getTotalRecord() {
      const data = await this.$api.getTotalRecord();
      this.allRecord = data.data.total_play_times;
      // 没有数据返回执行
      this.game_keys.forEach((i) => {
        if (!this.allRecord[i]) {
          this.allRecord[i] = 0;
        }
      });
    },

    // 获取个人信息
    async getMyInfo() {
      this.loading = true;
      await this.$api
        .getUserRecord([
          { asc: this.game_asc[this.game_key], game_key: this.game_key },
        ])
        .then((res) => {
          this.loading = false;
          this.can_play = res.data[this.game_key].can_play;
          if (!this.can_play) {
            this.CountDown();
          } else {
            this.saveTime = 0;
            this.downTime = "available";
          }
          this.myRanks = res.data;
          Object.keys(this.myRanks).forEach((key) => {
            if (this.game_key != "cyber_wing") {
              this.myRanks[key].best_score = this.myRanks[key].best_score / 100;
            }
          });
        })
        .catch(() => {
          this.loading = false;
        });
    },

    //游戏开始
    async start() {
      this.$amplitude_track("GAME_GO", { game: this.game_key });
      await this.getMyInfo();
      if (this.can_play) {
        this.isGame = false;
      } else {
        this.isReset = true;
      }
    },

    //游戏重置
    reset() {
      this.loading = true;
      grecaptcha.ready(() => {
        grecaptcha
          .execute("6LfJusskAAAAAIXiExfebl0eFsbzjRo04kD_nxrK", {
            action: "submit",
          })
          .then((token) => {
            console.log("google", token);
            //google 人机校验成功
            this.$api
              .checksum({ token: token })
              .then((event) => {
                // 后台token google校验成功
                if (event.result == 1) {
                  //再次通过后台校验购买次数
                  this.$api
                    .buyTimes(
                      {
                        game_key: this.game_key,
                      },
                      event.data
                    )
                    .then((res) => {
                      this.loading = false;
                      if (res.error_code == "115101") {
                        // 购买次数币不够
                        this.$message({
                          message:
                            "Sorry, You don't have enough $CARROTs to open. Please join the other event to reward more $CARROTs or wait for the cool down time to end.",
                          showClose: true,
                          type: "error",
                        });
                        return;
                      } else if (res.error_code == "115102") {
                        // 购买次数人机校验失败
                        this.$message({
                          message: "Human check failed!",
                          showClose: true,
                          type: "error",
                        });
                        return;
                      }
                      this.$message({
                        message: "Redeemed successfully!",
                        showClose: true,
                        type: "success",
                      });
                      this.saveTime = 0;
                      this.isReset = false;
                    })
                    .catch(() => {
                      // 购买次数后台报错
                      this.loading = false;
                      this.$message({
                        message: "Redeemed failed!",
                        showClose: true,
                        type: "error",
                      });
                    });
                } else {
                  // 后台token google校验失败
                  this.loading = false;
                  this.$message({
                    message: "Human check failed!",
                    showClose: true,
                    type: "error",
                  });
                }
              })
              .catch(() => {
                // 后台报错校验失败
                this.loading = false;
                this.$message({
                  message: "Human check failed!",
                  showClose: true,
                  type: "error",
                });
              });
          })
          .catch((err) => {
            this.loading = false;
            this.$message({
              message: "Human check failed!",
              showClose: true,
              type: "error",
            });
            console.error(err);
          });
      });
    },

    async getWallet() {
      this.loading = true;
      await this.$api
        .getMe()
        .then((res) => {
          this.loading = false;
          this.myInfo.user_name = res.first_name ?? "";
          this.myInfo.wallet_address = res.wallet_address ?? "";
          let isBan = res.wallet_enabled;
          if (isBan === false) {
            this.isWallet = true;
          } else {
            this.isWallet = false;
          }
        })
        .catch(() => {
          this.isWallet = false;
          this.loading = false;
        });
      if (this.myInfo.wallet_address) {
        this.myInfo.wallet_address = this.hiddeAddress(
          this.myInfo.wallet_address
        );
      }
    },

    // 隐藏钱包地址
    hiddeAddress(ads) {
      let str = ads;
      let str1 = str.substr(0, 3);
      let str2 = str.substr(str.length - 3, 3);
      return (ads = str1 + "*****" + str2);
    },

    // 游戏倒计时
    async CountDown() {
      clearInterval(this.timer);
      this.loading = true;
      await this.$api
        .getGameCountDown({ game_key: this.game_key })
        .then((res) => {
          this.loading = false;
          this.saveTime = res.data;
        })
        .catch(() => {
          this.loading = false;
        });
      if (this.saveTime > 0) {
        this.timer = setInterval(() => {
          this.formatSeconds(this.saveTime);
        }, 1000);
      }
    },

    //秒数转化为时分秒
    formatSeconds(value) {
      var secondTime = parseInt(value); // 秒
      var minuteTime = 0; // 分
      var hourTime = 0; // 小时
      if (secondTime > 60) {
        //如果秒数大于60，将秒数转换成整数
        //获取分钟，除以60取整数，得到整数分钟
        minuteTime = parseInt(secondTime / 60);
        //获取秒数，秒数取余，得到整数秒数
        secondTime = parseInt(secondTime % 60);
        //如果分钟大于60，将分钟转换成小时
        if (minuteTime > 60) {
          //获取小时，获取分钟除以60，得到整数小时
          hourTime = parseInt(minuteTime / 60);
          //获取小时后取余的分，获取分钟除以60取余的分
          minuteTime = parseInt(minuteTime % 60);
        }
      }
      if (secondTime < 10) {
        secondTime = "0" + secondTime;
      }
      if (minuteTime < 10) {
        minuteTime = "0" + minuteTime;
      }
      if (hourTime < 10) {
        hourTime = "0" + hourTime;
      }
      var result = "" + secondTime;

      if (minuteTime > 0) {
        if (hourTime <= 0) {
          result = "00:" + minuteTime + ":" + result;
        } else {
          result = "" + minuteTime + ":" + result;
        }
      }

      if (hourTime > 0) {
        result = "" + hourTime + ":" + result;
      }
      if (hourTime <= 0 && minuteTime <= 0) {
        result = "00:00:" + secondTime;
      }
      this.downTime = result;
      this.saveTime--;
      if (this.saveTime <= 0) {
        this.saveTime = 0;
      }
      if (this.saveTime == 0) {
        this.downTime = "available";
        this.can_play = true;
      }
      return result;
    },

    // 鼠标移入播放音效
    enter_play() {
      // this.$refs.audio_enter.play();
    },
    // 鼠标点击播放
    click_play() {
      // this.$refs.audio_click.play();
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style  lang="less" type="text/less" scoped>
.content {
  background: no-repeat center;
  background-size: cover;
  // background-attachment:fixed;
  background-color: #fefef2;
  min-width: 1420px;
  max-width: 100%;
  min-height: 100vh;
  .game {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;

    .gameList {
      margin: 2rem auto;
      width: 46.25rem;
      .title {
        margin-bottom: 0.2344rem;
        font-size: 50px;
        font-weight: 900;
        color: #fff;
        -webkit-text-stroke: 10px #000;
        position: relative;
        z-index: 1;
        &::after {
          color: #fff;
          position: absolute;
          z-index: 2;
          left: 0;
          top: 0;
          -webkit-text-stroke-width: 0;
        }
      }
      .triangle {
        width: 0px;
        height: 0px;
        border: 10px solid transparent;
        border-top-color: #fff;
      }
      .tebGames {
        .details:first-child {
          background-color: #193b94;
          .rankTable li div {
            border: 1px solid #193b94;
          }
        }
      }
      .jointGames {
        .details:first-child {
          background-color: #0e6167;
          .rankTable li div {
            border: 1px solid #0e6167;
          }
        }
      }
      .games {
        .details {
          padding: 0.2813rem;
          margin-bottom: 50px;
          position: relative;
          .bottom {
            margin-top: 0.3281rem;
          }
          .poster {
            width: 17.1094rem;
            height: 17.1094rem;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .topleft {
            width: 28.3125rem;
            height: 17.0625rem;
          }
          .times {
            .gameTitle {
              font-size: 1.2188rem;
              font-weight: 600;
              color: #fcff00;
              -webkit-text-stroke: 0;
            }
            .cumulative {
              margin-top: 3px;
              font-size: 0.6563rem;
              color: #fff;
              .green {
                color: #0eff0e;
              }
            }
            .mytimes {
              font-size: 0.6563rem;
              color: #fff;
              .green {
                color: #0eff0e;
              }
            }
            p {
              margin: 0;
            }
          }
          .btn {
            width: 65px;
            background-color: #fff;
            opacity: 0.8;
            height: 28px;
            line-height: 28px;
            text-align: center;
            border-radius: 8px;
            letter-spacing: 1px;
            font-size: 12px;
            transition: 0.4s;
            cursor: pointer;
            user-select: none;
          }
          .logoBox {
            width: 8.4375rem;
            i {
              font-size: 1.4063rem;
            }
          }
          .logo {
            width: 2.6719rem;
            height: 3.3281rem;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .tables {
            .tableTitle {
              width: 28.0781rem;
              height: 1.4063rem;
              line-height: 1.4063rem;
              margin-left: 1px;
              text-align: center;
              font-size: 0.8438rem;
              font-weight: 700;
              color: #fff;
              background-color: rgba(0, 0, 0, 0.5);
              border: 1px solid rgba(255, 255, 255, 0);
            }
            .table {
              ul {
                list-style-type: none;
                padding: 0;
                margin: 0;
              }
              .rankTable {
                min-height: 1.875rem;
                line-height: 1.875rem;
                text-align: center;
                font-weight: bold;
                font-size: 0.9375rem;
                li:nth-child(odd) {
                  background-color: rgba(255, 255, 255, 0.5);
                }
                li:nth-child(even) {
                  background-color: rgba(223, 223, 223, 0.5);
                }
                li:first-child {
                  color: #ff0000;
                  text-shadow: -2px 0px 2px black, 2px 0px 2px black,
                    0px -2px 2px black, 0px 2px 2px black;
                  .name img {
                    width: 1.5938rem;
                    height: 1.3125rem;
                  }
                }
                li:nth-child(2) {
                  color: #ff7e00;
                  text-shadow: -2px 0px 2px black, 2px 0px 2px black,
                    0px -2px 2px black, 0px 2px 2px black;
                  .name img {
                    margin-left: 0.1406rem;
                    width: 1.3125rem;
                    height: 1.125rem;
                  }
                }
                li:nth-child(3) {
                  color: #ffd800;
                  text-shadow: -2px 0px 2px black, 2px 0px 2px black,
                    0px -2px 2px black, 0px 2px 2px black;
                  .name img {
                    margin-left: 0.21rem;
                    width: 1.125rem;
                    height: 0.9375rem;
                  }
                }
                .num {
                  width: 2.3438rem;
                  overflow: hidden;
                }
                .name {
                  width: 13.125rem;
                  overflow: hidden;
                  box-sizing: border-box;
                  padding: 0 0.9375rem;
                }
                .address {
                  width: 7.9688rem;
                  overflow: hidden;
                }
                .score {
                  width: 4.6875rem;
                  overflow: hidden;
                }
              }
            }
          }
          .ranking {
            height: 9.8438rem;
            overflow-y: scroll;
          }
          .Myranking {
            height: 1.875rem;
            .rankTable {
              height: 2.3438rem;
              line-height: 2.3438rem;
              li {
                background: rgba(0, 0, 0, 0.5) !important;
                font-weight: bold;
                font-size: 0.9375rem;
                font-weight: bold;
                color: #06ff00 !important;
                text-shadow: -2px 0px 2px black, 2px 0px 2px black,
                  0px -2px 2px black, 0px 2px 2px black;
                .name {
                  box-sizing: border-box;
                  padding: 0 0.9375rem;
                  text-align: right;
                }
              }
            }
          }
          ::-webkit-scrollbar {
            width: 2px;
            height: 2px;
          }
          ::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.2);
          }

          .time {
            width: 8.4375rem;
            min-width: 115px;
            .actime {
              width: 100%;
              height: 3.0469rem;
              background-color: #0d1c4a;
              .title {
                margin: 0;
                color: #06ff00;
                font-size: 0.8438rem;
                -webkit-text-stroke: 0;
              }
              .date {
                color: #06ff00;
                font-size: 1.5rem;
              }
            }
            .version {
              margin-top: 0.2344rem;
              font-size: 0.5625rem;
              color: #ec64b1;
            }
          }
          .rule {
            width: 30.4688rem;
            height: 4.6875rem;
            overflow: auto;
            margin-bottom: 0.4688rem;
            font-weight: lighter;
            p {
              font-size: 12px;
              margin: 5px 0;
              color: #fff;
            }
          }
          .startBtn {
            width: 5.7188rem;
            height: 4.875rem;
            margin-top: 0.1406rem;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
            &:hover {
              transform: scale(1.05);
            }
          }
          .ban {
            cursor: not-allowed;
            img {
              filter: grayscale(100%);
            }
          }
          .share {
            width: 3.2813rem;
            height: 3.2813rem;
            position: absolute;
            top: -1.4063rem;
            left: -1.4063rem;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      /deep/ .records {
        position: relative;
        z-index: 5;
        .el-tabs--border-card {
          border: 1px solid #193b94;
        }
        .el-tabs--left {
          height: 220px;
        }
        .el-tabs__content {
          padding: 0;
        }
        .el-tabs--border-card {
          background-color: #8c9dca;
        }
        .el-table .el-table__cell {
          padding: 8px 0;
        }
        .el-tabs--left .el-tabs__header.is-left {
          margin-right: 0;
        }
        .el-tabs--left .el-tabs__nav-wrap.is-left {
          background-color: #0c1d4a;
        }
        .el-tabs--border-card > .el-tabs__header {
          background-color: #0c1d4a;
        }
        .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
          background-color: #8c9dca;
          border: none;
          color: #4c1f9d;
          font-weight: 900;
        }
        .el-tabs--border-card
          > .el-tabs__header
          .el-tabs__item:not(.is-disabled):hover {
          color: #4c1f9d;
        }
        .el-tabs--left.el-tabs--border-card .el-tabs__item.is-left {
          width: 80px;
        }
        .el-tabs--left .el-tabs__item.is-left {
          text-align: center;
        }
        .el-table,
        .el-table__expanded-cell {
          background-color: transparent;
        }
        .el-table th,
        .el-table tr {
          background-color: transparent;
        }
        .el-table--enable-row-hover .el-table__body tr:hover > td {
          background-color: transparent !important;
        }
        .el-table {
          border-bottom: 1px solid #0c1d4a;
        }
        .el-table th {
          border-bottom: 1px solid #0c1d4a !important;
        }

        .el-table td {
          border-bottom: 1px solid #0c1d4a;
        }

        .el-table--border::after,
        .el-table--group::after,
        .el-table::before {
          background-color: #0c1d4a;
        }

        .el-table th > .cell {
          color: white;
          font-size: 16px;
        }
        .el-table__header tr {
          background-color: #214096;
        }
        .el-table__body tr:nth-of-type(odd) {
          background-color: #8c9dca;
          color: #000;
        }
        .el-table__body tr:nth-of-type(even) {
          background-color: #7c8dba;
          color: #000;
        }
      }
    }

    .flex_col {
      display: flex;
      flex-direction: column;
    }
    .just_bet {
      display: flex;
      justify-content: space-between;
    }
    .align_cen {
      display: flex;
      align-items: center;
    }
    .flex_rev {
      display: flex;
      flex-direction: row-reverse;
    }
    .backBtn {
      width: 120px;
      height: 45px;
      margin: 0 900px 0 0;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .listBack {
      margin: 0 39rem 0 0;
    }
  }

  .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;

    .info {
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 420px;
      background-color: #f89506;
      opacity: 0.9;
      border-radius: 15px;
      border: 2px solid #000;
      .description {
        color: #000;
        font-weight: 700;
        font-size: 14px;
        padding: 10px 15px 15px 15px;
        p {
          margin: 0 0 10px 0;
          line-height: 18px;
        }
      }
      .btns {
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 10px;
        .btn {
          width: 100px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #f89506;
          font-size: 16px;
          font-weight: 700;
          background-color: #000;
          border-radius: 15px;
          cursor: pointer;
          &:hover {
            transform: scale(1.05);
          }
        }
      }
    }
  }
}
</style>